<template>
  <view>
    <u-modal v-model="show" :content="content" @confirm="confirm" @cancel="show = false" :show-cancel-button="true"/>
    <u-search @search="search" :show-action="false" input-align="center" height="70" :clearabled="true" placeholder="请输入学号或姓名" v-model="searchContent"/>
    <u-empty v-if="isEmpty" text="暂无成员" mode="list"/>
    <view v-if="isShow">
      <view class="message-list">
        <u-swipe-action :show="m.show" :index="i" :disabled="!isCreateUser || i === 0"
                        v-for="(m,i) in memberList" :key="m.id"
                        @click="click" @open="open"
                        :options="options"
        >
          <view class="uni-swipe-action" @click="toMessageDetail(m.id)">
            <view class="item" :class="m.stick  ? 'stick' : ''">
              <block>
                <view class="item-left">
                  <avatar-group :avatar="m.avatar" :text="m.name"/>
                </view>
                <view class="item-middle">
                  <text class="title">{{ m.num }} {{ m.name }}</text>
                  <view class="message">加入课程时间：{{ m.gmtCreate |  dateFormat }}</view>
                </view>
                <view class="item-right">
                  <view class="time">1</view>
                </view>
              </block>
            </view>
          </view>
        </u-swipe-action>
      </view>
      <u-loadmore v-if="!isEmpty" :status="status" />
    </view>
  </view>
</template>

<script>
import avatarGroup from "@/components/avatar_group/avatar_group.vue"
import { mapGetters } from 'vuex'
export default {
  name: 'user-list',
  components: {
    avatarGroup
  },
  data() {
    return {
      // 是否是创建者
      isCreateUser: false,
      isEmpty:false,
      searchContent: '',
      options: [
        {
          text: "踢出",
          style: {
            backgroundColor: "#dd524d"
          }
        }
      ],
      memberList: [],
      pageNum: 1,
      total: 0,
      pages: 0,
      status: '',
      show: false,
      content: '您确定要踢出该成员吗？',
      currentIndex: '',
      currentId: '',
      isShow: false,
      courseId: '',
      type: '1'
    }
  },
  computed: {
    ...mapGetters(['id'])
  },
  async onLoad(e) {
    uni.$emit("setVuexUserInfo", {user: null, isLoginPage: false});
    this.courseId = e.id;
    this.type = e.type;
    await this.initial();
  },
  async onPullDownRefresh() {
    this.memberList = [];
    await this.initial();
    setTimeout(() => {
      uni.stopPullDownRefresh();
    },1000)
  },
  async onReachBottom() {
    this.pageNum = this.pageNum + 1;
    this.status = 'loading';
    if(this.pageNum < this.pages) {
      await this.getCourseMemberList();
      this.status = 'loadmore';
    }else {
      this.pageNum = this.pageNum - 1;
      setTimeout(() => {
        this.status = 'nomore';
      }, 1000)
    }
  },
  methods: {
    async initial(){
      // 初始化
      this.pageNum = 1;
      this.total = 0;
      this.searchContent = '';
      await this.getMemberList();

    },
    async search(){
      // 搜索成功再显示
      this.isShow = false;
      this.pageNum = 1;
      await this.getMemberList();
    },
    // 查询用户
    async getMemberList(){
      const res = await this.$u.api.getMemberList(this.type, this.courseId,{pageNum: this.pageNum, searchContent: this.searchContent});
      if (res.total === 0){
        this.isEmpty = true;
      }else {
        const data = res.data;
        if (data[0].id === this.id){
          this.isCreateUser = true;
        }
        for (const index in data) {
          data[index].show = false;
          data[index].stick = false
        }
        if (this.pageNum > 1){
          // 第二页用拼接
          this.memberList.concat(data);
        }else {
          // 第一页直接赋值
          this.memberList = data;
          this.isShow = true;
        }
        this.isEmpty = false;
        this.total = res.total;
        this.pages = res.pages;
      }
    },
    toMessageDetail(id) {
      if (id === this.id){
        this.$u.toast('当前用户是我！')
        return;
      }
      this.$u.api.addFriend(id).then(res => {
        if (res.code === 200){
          this.$u.route({
            url: 'pages/pri_chat/pri_chat',
            params: {
              fid: res.data
            }
          })
        }
      })
    },
    click(index, index1) {
      if(index1 === 0) {
        this.currentIndex = index;
        this.currentId = this.memberList[index].id;
        this.show = true;
      }
    },
    confirm(){

    },
    open(index) {
      const item = this.memberList[index];
      item.show = true;
      this.$set(this.memberList,index,item);
      this.memberList.map((val, idx) => {
        if(index !== idx && this.memberList[idx].show){
          const tempItem = this.memberList[idx];
          tempItem.show = false;
          this.$set(this.memberList,idx,tempItem);
        }
      })
    }
  }
}
</script>

<style lang="scss">
.uni-swipe-action {
  width: 100%;
  overflow: hidden;
}

.item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 10upx 16upx;
  background-color: #fff;
  border-bottom: 1px solid rgb(243, 243, 243);

  &.stick {
    background-color: rgba(243, 236, 221, .5);
  }

  .item-left {
    text-align: center;

    .image {
      width: 100rpx;
      height: 100rpx;
      border-radius: 50rpx;
      background-color: #eee;
    }

    .avatar {
      width: 100rpx;
      height: 100rpx;
      text-align: center;
      line-height: 100rpx;
      background: #4191ea;
      border-radius: 50%;
      overflow: hidden;

      .iconfont {
        width: 100rpx;
        height: 100rpx;
        text-align: center;
        line-height: 100rpx;
        color: #fff;
        font-size: 40rpx;
      }
    }
  }

  .item-middle {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: flex-start;
    margin-left: 15rpx;
    overflow: hidden;

    .title {
      width: 100%;
      color: #000;
      font-family: "微软雅黑";
      font-weight: 400;
      font-size: 37rpx;
      height: 50rpx;
      line-height: 60rpx;
      overflow: hidden;
      /*自动隐藏文字*/
      text-overflow: ellipsis;
      /*文字隐藏后添加省略号*/
      white-space: nowrap;
      /**强制不换行*/
    }

    .message {
      width: 100%;
      font-family: "微软雅黑";
      color: #808080;
      height: 50rpx;
      font-weight: bold;
      line-height: 40rpx;
      font-size: 27rpx;
    }
  }

  .item-right {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 27rpx;
    font-weight: bold;

    .time {
      color: #808080;
      height: 60rpx;
      line-height: 60rpx;
    }

    .mark {
      background-color: #f74c31;
      line-height: 35rpx;
      text-align: center;
      font-size: 20rpx;
      min-width: 35rpx;
      min-height: 35rpx;
      border-radius: 18rpx;
      color: #fff;
    }
  }
}
</style>
